<template>
  <div class="register-container">
    <h2 class="title">用户注册</h2>
    <el-form
      :model="registerForm"
      :rules="rules"
      ref="registerFormRef"
      class="register-form"
      @submit.prevent="handleSubmit"
      label-width="100px">

      <el-form-item prop="username" label="用户名">
        <el-input
          v-model="registerForm.username"
          placeholder="请输入用户名"
          prefix-icon="el-icon-user"
        />
      </el-form-item>
      <el-form-item prop="password" label="密码">
        <el-input
          v-model="registerForm.password"
          placeholder="请输入密码"
          type="password"
          prefix-icon="el-icon-lock"
        />
      </el-form-item>
      <el-form-item prop="confirmPassword" label="确认密码">
        <el-input
          v-model="registerForm.confirmPassword"
          placeholder="请再次输入密码"
          type="password"
          prefix-icon="el-icon-lock"
        />
      </el-form-item>
      <el-form-item>  <!-- 添加空标签用于按钮对齐 -->
        <el-button type="primary" class="register-button" @click="handleSubmit">注册</el-button>
      </el-form-item>
      <p v-if="errorMessage" class="error-message">{{ errorMessage }}</p>
    </el-form>
  </div>
</template>

<script>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { registerUser } from '@/api/auth';

export default {
  name: 'UserRegister',
  setup() {
    const registerFormRef = ref(null);
    const registerForm = ref({
      username: '',
      password: '',
      confirmPassword: '', // 新增确认密码字段
    });
    const errorMessage = ref('');

    const rules = {
      username: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
        { min: 4, max: 20, message: '用户名长度应为4-20个字符', trigger: 'blur' },
        {
          pattern: /^[a-zA-Z0-9_]+$/,
          message: '用户名只能包含字母、数字和下划线',
          trigger: 'blur',
        },
      ],
      password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 8, max: 20, message: '密码长度应为8-20个字符', trigger: 'blur' },
        {
          pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]+$/,
          message:
            '密码必须包含至少一个大写字母、一个小写字母、一个数字和一个特殊字符',
          trigger: 'blur',
        },
      ],
      confirmPassword: [
        { required: true, message: '请再次输入密码', trigger: 'blur' },
        {
          validator: (rule, value, callback) => {
            if (value !== registerForm.value.password) {
              callback(new Error('两次输入的密码不一致'));
            } else {
              callback();
            }
          },
          trigger: 'blur',
        },
      ],
    };

    const router = useRouter();

    const handleSubmit = async () => {
      try {
        await registerFormRef.value.validate(); // 触发表单验证
        await registerUser(registerForm.value);
        router.push('/login'); // 注册成功后跳转到登录页面
        errorMessage.value = '';
      } catch (error) {
        if (error && error.message) {
          errorMessage.value = error.message;
        } else {
          errorMessage.value = '注册失败，请重试';
        }
      }
    };

    return {
      registerForm,
      registerFormRef,
      errorMessage,
      handleSubmit,
      rules,
    };
  },
};
</script>

<style scoped>
/* 调整表单项目间距 */
.register-form .el-form-item {
  margin-bottom: 22px;
}

/* 调整按钮位置 */
.register-form .el-form-item:last-child {
  margin-bottom: 0;
}

/* 保持其他样式不变 */
.register-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 100px;
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea, #764ba2);
}

.title {
  text-align: center;
  color: #fff;
  margin-bottom: 20px;
}

.register-form {
  width: 100%;
  max-width: 400px;
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.register-button {
  width: 100%;
  margin-top: 10px;
}

.error-message {
  color: #f56c6c;
  text-align: center;
  margin-top: 10px;
}
</style>